<template>
    <div>
      <el-card :bordered="false" shadow="never" class="ivu-mb-16" :body-style="{ padding: 0 }">
        <div class="padding-add">
          <el-form ref="params" :model="params" @submit.native.prevent inline>
            <el-form-item label="技能名称：" prop="status2" label-for="status2">
              <el-input clearable v-model="params.name" placeholder="请输入技能名称" class="form_content_width" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" v-db-click @click="getData">查询</el-button>
            </el-form-item>
            <el-form-item>
              <router-link
                :to="$routeProStr + '/classification/skill/add_skill'"
                v-auth="['admin-user-user-index']"
                ><el-button type="primary" v-db-click>添加技能</el-button></router-link
              >
            </el-form-item>
          </el-form>
        </div>
      </el-card>
      <el-card :bordered="false" shadow="never" class="ivu-mt">
        <el-button v-db-click @click="delAll" class="delAll">批量删除</el-button>
        <el-table
          :border="false"
          class="vxeTable"
          highlight-hover-row
          highlight-current-row
          :loading="loading"
          ref="xTable"
          header-row-class-name="false"
          :data="tableData"
          @select="handleSelectRow"
          @select-all="handleSelectRow"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column label="ID" min-width="100">
            <template slot-scope="scope">
              <span>{{ scope.row.id }}</span>
            </template>
          </el-table-column>
          <el-table-column label="图标" min-width="90">
            <template slot-scope="scope">
              <div v-if="scope.row.image.length !== 0" v-viewer>
                <div class="tabBox_img">
                  <img v-lazy="scope.row.image" />
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="分类名称" min-width="100">
            <template slot-scope="scope">
              <span>{{ scope.row.parent_name }}</span>
            </template>
          </el-table-column>
          <el-table-column label="技能名称" min-width="100">
            <template slot-scope="scope">
              <span>{{ scope.row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column label="创建时间" min-width="100">
            <template slot-scope="scope">
              <span>{{ scope.row.create_time }}</span>
            </template>
          </el-table-column>
          <el-table-column label="更新时间" min-width="100">
            <template slot-scope="scope">
              <span>{{ scope.row.update_time }}</span>
            </template>
          </el-table-column>
          <el-table-column field="date" label="操作" align="center" width="150" fixed="right">
            <template slot-scope="scope">
              <a v-db-click @click="edit(scope.row)">编辑</a>
              <br />
              <a v-db-click @click="del(scope.row, '删除', scope.$index)">删除</a>
            </template>
          </el-table-column>
        </el-table>
  
        <div class="acea-row row-right page">
          <pagination
            v-if="total"
            :total="total"
            :page.sync="params.page"
            :limit.sync="params.limit"
            @pagination="pageChange"
          />
        </div>
      </el-card>
    </div>
  </template>
  
  <script>
  import { getSkillList } from '@/api/classification';
  
  export default {
    name: 'skill',
    data() {
      return {
        total: 0,
        params: {
          name: '',
          page: 1,
          limit: 15,
        },
        loading: false,
        tableData: [],
        selectedIds: [],
      };
    },
    components: {},
    computed: {},
    mounted() {
      this.getData();
    },
    methods: {
      handleSelectRow(selection) {
        let ids = [];
        selection.map((e) => {
          ids.push(e.id);
        });
        this.selectedIds = ids;
      },
      pageChange() {
        this.getData();
      },
      // 列表
      getData() {
        this.loading = true;
        getSkillList(this.params)
          .then(async (res) => {
            this.tableData = res.data.list;
            this.total = res.data.count;
            this.loading = false;
          })
          .catch((res) => {
            this.loading = false;
            this.$message.error(res.msg);
          });
      },
      // 编辑
      edit(row) {
        this.$router.push({ path: this.$routeProStr + '/classification/skill/add_skill/' + row.id });
      },
      // 删除
      del(row, tit, num) {
        let delfromData = {
          title: tit,
          num: num,
          url: `classification/skill/${row.id}`,
          method: 'DELETE',
          ids: '',
          un: 1,
        };
        this.$modalSure(delfromData)
          .then((res) => {
            this.$message.success(res.msg);
            this.page = 1;
            this.getData();
          })
          .catch((res) => {
            this.$message.error(res.msg);
          });
      },
      // 批量删除
      delAll() {
        if (this.selectedIds.length === 0) {
          this.$message.error('请先选择删除的技能！');
        } else {
          let idss = {
            ids: this.selectedIds,
          };
          let delfromData = {
            title: '批量删除技能',
            url: `/classification/skillBatchDel`,
            method: 'delete',
            ids: idss,
          };
          this.$modalSure(delfromData)
            .then((res) => {
              this.$message.success(res.msg);
              this.page = 1;
              this.getData();
            })
            .catch((res) => {
              this.$message.error(res.msg);
            });
        }
      },
    },
  };
  </script>
  
  <style scoped lang="scss">
  .vxeTable {
    > .vxe-table--header-wrapper {
      background: #fff !important;
    }
  
    .icon {
      font-size: 20px;
    }
  }
  ::v-deep .vxe-table--render-default .vxe-table--border-line {
    z-index: 2 !important;
  }
  .rule {
    display: flex;
    flex-wrap: wrap;
    overflow-y: scroll;
    height: max-content;
    max-height: 600px;
    flex: 1;
  }
  .tree::-webkit-scrollbar {
    width: 2px;
    background-color: #f5f5f5;
  }
  /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
  .rule::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    background-color: #f5f5f5;
  }
  
  /*定义滚动条轨道 内阴影+圆角*/
  .rule::-webkit-scrollbar-track {
    border-radius: 4px;
    background-color: #f5f5f5;
  }
  
  /*定义滑块 内阴影+圆角*/
  .rule::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: #ccc;
  }
  
  .rule-list {
    background-color: #f2f2f2;
    width: 48.5%;
    height: max-content;
    margin: 5px;
    border-radius: 3px;
    padding: 10px;
    color: #333;
    cursor: pointer;
    transition: all 0.1s;
  }
  
  .rule-list:hover {
    background-color: #badbfb;
  }
  
  .rule-list div {
    white-space: nowrap;
  }
  
  .select-rule {
    background-color: #badbfb;
  }
  .route-list {
    display: flex;
    margin-top: 10px;
  
    .tree {
      width: 200px;
      overflow-y: scroll;
      max-height: 600px;
      ::v-deep .el-tree-node__children .el-tree-node .el-tree-node__content {
        padding-left: 14px !important;
      }
    }
  }
  .delAll {
    margin-bottom: 10px;
  }
  </style>
  